<template>
  <!-- 收藏房源页面 -->
  <div>
    <el-container>
      <el-header>
        <el-menu class="el-menu-demo" mode="horizontal">
          <el-menu-item index="1">旅社（{{ fy.length }}）</el-menu-item>
        </el-menu>
      </el-header>
      <el-main style="height: 100%">
        <el-row>
          <el-col :span="8" v-for="(item, i) in fy" :key="i">
            <el-card class="box" :body-style="{ padding: '0px' }">
              <div class="imgc">
                <img :src="item.himg" class="image" />
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  class="button"
                  @click="deleteRoom(item, i)"
                ></el-button>
              </div>
              <div class="namepic">
                <div>
                  <span>{{ item.hname }}</span>
                  <el-button type="warning" size="mini" round  @click="jumpIn(item.hid)"
                    >查看详情</el-button
                  >
                </div>
                <div class="bottom clearfix">
                  <span class="site">{{ item.hlocation }}</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      aa: { userid: JSON.parse(sessionStorage.getItem('user')).userid },
      fy: [], //收藏房源列表  拿到fy
    }
  },
  mounted() {
    this.$http.scApi.query(this.aa).then((res) => {
      console.log(res)
      this.fy = res.data.data
      console.log(this.fy)
    })
  },
  methods: {
    jumpIn(id) {
      console.log('房子编号', id)
      this.$router.push(`/hotellist/${id}`)
    },
    deleteRoom(row, i) {
      console.log(row)
      this.$http.scApi.delete(row).then((res) => {
        console.log(res)
        if (res.data.code == 200) {
          this.$message({ message: '删除完成', type: 'success' })
          // 将当前列表中的i位置的元素移除
          this.fy.splice(i, 1)
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.el-main {
  padding: 20px;
  > div {
    height: 100%;
  }
}
.box {
  margin-bottom: 20px;
  margin-right: 20px;
}
.imgc {
  position: relative;
  .button {
    position: absolute;
    right: 5px;
    bottom: 5px;
  }
}
.namepic {
  padding: 14px;
  > div:first-child {
    display: flex;
    justify-content: space-between;
  }
}

.el-menu {
  border-radius: 10px;
}
.site {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}

.clearfix:after {
  clear: both;
}
</style>
